<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { ElInput, ElForm, ElFormItem, ElButton, ElDivider } from "element-plus"
import type { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router';
import { accessRoutes } from '#/router/routes';
defineOptions({ name: 'Login' });
const router = useRouter();
const formRef = ref<FormInstance>()

const ruleForm = ref({
  phone: "",
  password: ""
})
const rules = {
  phone: [
    { required: true, message: '输入手机号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '输入密码', trigger: 'blur' },
  ]
}

// 登录成功后需要判断用户身份，是跳转到客户端还是服务端
const sumbit = () => {
  if (!formRef) return
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log('submit!')
      accessRoutes.forEach(routerItem=>{
        router.addRoute(routerItem)
      })
      setTimeout(()=>{
        router.push('/vben-admin/about')
      },500)
    }
  })
}

const onRegister = () => {
  router.push('/auth/register')
  // router.push({name:'Register'})
}

onMounted(() => {
  formRef.value?.resetFields()
})

</script>
<template>
  <!-- 登录 -->
  <div class="login flex flex-col items-center">
    <div class="pb-[50px] font-semibold text-[26px]">登&nbsp;&nbsp;录</div>
    <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="left">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="密码" prop="password" class="mt-[30px] mb-[30px] w-[350px]">
        <el-input v-model="ruleForm.password" type="password" show-password />
      </el-form-item>
    </el-form>
    <div class="sumbit pt-[25px] pb-[20px] w-[100%]">
      <el-button color="#ef6295" class="w-[100%]" @click="sumbit">
        <span class="text-[#fff]">登&nbsp;&nbsp;录</span>
      </el-button>
    </div>
    <div class="footer text-[12px]">
      <span class="text-[#e3e3e3] cursor-pointer" @click="onRegister">注册</span>
      <el-divider direction="vertical" />
      <span class="text-[#e3e3e3] cursor-pointer">密码</span>
    </div>
  </div>
</template>
